<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico"/>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/extend/dtree.css">
    <link rel="stylesheet" href="../../layui/extend/font/dtreefont.css">

</head>

<body>

<div class="yadmin-body animated fadeIn">
    <form class="layui-form yadmin-search-area input" action="/ordEqu/selectList">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="visiterName" class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="visiterName" autocomplete="off"
                           id="visiterName" class="layui-input">
                </div>

                <label for="equName" class="layui-form-label">设备名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="equName" autocomplete="off"
                           id="equName" class="layui-input">
                </div>

                <label for="state" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="state" id="state">
                        <option value="">请选择</option>
                        <option value="1">完成</option>
                        <option value="0">未完成</option>
                    </select>
                </div>

                <button type="button" data-type="reload"
                        class="layui-btn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="orderEqu-table" lay-filter = "orderEqu-table"></table>
</div>

<script type="text/html" id="toolbar">

    <!--<button type="submit" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">-->
        <!--<i class="layui-icon layui-icon-addition"></i>-->
        <!--新增-->
    <!--</button>-->

</script>

<script type="text/html" id="column-toolbar">

    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateState">
        <i class="layui-icon layui-icon-edit" title="取走"></i>
        取走
    </button>

    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit" title="完成"></i>
        完成
    </button>

    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete" title="删除"></i>
        删除
    </button>


</script>


<script src="../../js/jquery.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/common.js"></script>


<script>
    layui.config({
        base: '/layui/extend/'
    }).use(['laydate', 'element', 'form', 'table','layer','dtree', 'tablePlug'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var form = layui.form;
        var dtree = layui.dtree;
        var tablePlug = layui.tablePlug;



        table.render({
            elem: '#orderEqu-table',
            url: '/ordEqu/selectList',
            page: true,
            toolbar: '#toolbar',
            smartReloadModel: true,
            cols: [
                [
                    {type:'checkbox'},
                    {type: 'numbers', title: '序号', width: 60},
                    {field: 'Id', title: 'ID', hide: true},
                    {field: 'visiterName', title: '用户名', minWidth: 50},
                    {field: 'equName', title: '设备名称', minWidth: 80},
                    {field: 'createTime', title: '创建时间', align: 'center', width: 120},
                    {field: 'endTime', title: '结束时间',align: 'center', width: 120},
                    {field: 'state', title: '状态', align: 'center',  width: 80},
                    {field: 'damage', title: '设备状态', align: 'center', width: 80},
                    {field: 'address', title: '地址', align: 'center', width: 80},
                    {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                ]
            ],
            id:"orderEqu-table",
            done: function (res,curr,count) {
                $("[data-field='damage']").children().each(function(){
                    if($(this).text()=='0'){
                        $(this).text("设备损坏")
                    }else if($(this).text()=='1'){
                        $(this).text("设备正常")
                    }
                })
                $("[data-field='state']").children().each(function(){
                    if($(this).text()=='0'){
                        $(this).text("未完成")
                    }else if($(this).text()=='1'){
                        $(this).text("完成")
                    }else if($(this).text()=='2'){
                        $(this).text("已取走")
                    }
                })
            },

            limit:5,
            page:{
                layout:['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,limits:[5,10,15]
                ,first:false
                ,last:false
            },
            skin:'line'
        });

        //监听用户名搜索事件

        var active = {
            reload: function(){
                var visiterName = $('#visiterName');	//得到搜索框里已输入的数据
                var equName = $('#equName');	//得到搜索框里已输入的数据
                var state = $('#state');	//得到搜索框里已输入的数据
                //执行重载
                table.reload('orderEqu-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        visiterName:  visiterName.val(),
                        equName:equName.val(),//在表格中进行搜索
                        state:state.val()//在表格中进行搜索
                    }
                });
            }
        };

        $('.layui-inline .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



        // 行点击事件
        table.on('tool', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (event === 'edit') {

                layer.confirm("设备是否损坏?", {icon: 3, title: '提示'},
                    function (index) {// 确定回调
                        $.ajax({
                            url: "/ordEqu/upDamage/"+data.id+","+-1+","+data.equId,
                            dataType: "json",
                            async: false,
                            success: function (res) {
                                console.log(res);
                                if (res['code'] == 0) {
                                    table.reload('orderEqu-table');
                                    parent.layer.msg("已取走", {icon: 6});
                                } else {
                                    parent.layer.msg("错误", {icon: 6});
                                    table.reload('orderEqu-table');
                                }
                            }
                        })
                        layer.close(index);
                        table.reload('orderWaiter-table');
                    }, function (index) {//取消回调
                        $.ajax({
                            url: "/ordEqu/upDamage/"+data.id+","+1+","+data.equId,
                            dataType: "json",
                            async: false,
                            success: function (res) {
                                console.log(res);
                                if (res['code'] == 0) {
                                    table.reload('orderEqu-table');
                                    parent.layer.msg("已完成", {icon: 6});
                                } else {
                                    parent.layer.msg("错误", {icon: 6});
                                    table.reload('orderEqu-table');
                                }
                            }
                        })
                        layer.close(index);
                    }
                );

            } else if (event === 'del') {
                layer.confirm("确定删除角色吗?", {icon: 3, title: '提示'},
                    function (index) {// 确定回调
                        $.ajax({
                            url: "/ordEqu/delete/"+data.id,    //这个是后台的路由地址
                            type: "POST",
                            // data:{"id":data.id},//传给后台的值
                            dataType: "json",
                            async: false,
                            success: function(data){
                                if(data.code==0){   //从前台取回的状态值
                                    layer.close(index);
                                    table.reload('orderEqu-table');
                                    //同步更新表格和缓存对应的值
                                    obj.del();
                                    layer.msg("删除成功", {icon: 6});
                                }else{
                                    layer.msg("删除失败", {icon: 5});
                                }
                                table.reload('orderEqu-table');
                            }
                        });
                        layer.close(index);
                        table.reload('orderWaiter-table');
                    }, function (index) {//取消回调
                        layer.close(index);
                    }
                );

            }else if(event==='updateState'){
                $.ajax({
                    url: "/ordEqu/upDamage/"+data.id+"2"+data.equId,    //这个是后台的路由地址
                    type: "POST",
                    // data:{"id":data.id},//传给后台的值
                    dataType: "json",
                    async: false,
                    success: function(data){
                        if(data.code==0){   //从前台取回的状态值
                            layer.close(index);
                            table.reload('orderEqu-table');
                            //同步更新表格和缓存对应的值
                            obj.del();
                            layer.msg("删除成功", {icon: 6});
                        }else{
                            layer.msg("删除失败", {icon: 5});
                        }
                        table.reload('orderEqu-table');
                    }
                });
            }
        });

        // table.on('row(orderEqu-table).status',function(obj){
        //     var data = obj.data;
        //     var event = obj.event;
        //     // console.log(this.checked?'1':'0');
        //     // console.log(data.state);
        //     this.checked=this.checked?false:true;
        //     data.state = this.checked;
        //     // console.log(this.checked?'1':'0');
        //     // console.log(data.state);
        //     console.log(data.id);
        //     if(data.state == true)
        //         data.state = 0;
        //     else data.state = 1;
        //     if ( data.state == 1) {
        //         $.ajax({
        //             url: "/ordEqu/upDamage/"+data.id+","+data.state,
        //             dataType: "json",
        //             async: false,
        //             success: function (res) {
        //                 console.log(res);
        //                 if (res['status'] == 200) {
        //                     table.reload('orderEqu-table');
        //                     parent.layer.msg("已完成", {icon: 6});
        //                 } else {
        //                     parent.layer.msg("错误", {icon: 6});
        //                     table.reload('orderEqu-table');
        //                 }
        //             }
        //         })
        //     }
        //     table.reload('orderEqu-table');
        //
        // });
        //
        // function edit(data) {
        //
        //     $.ajax({
        //         url: "/ordEqu/upDamage/"+data.id+","+1,
        //         dataType: "json",
        //         async: false,
        //         success: function (res) {
        //             console.log(res);
        //             if (res['status'] == 200) {
        //                 table.reload('orderEqu-table');
        //                 parent.layer.msg("已完成", {icon: 6});
        //             } else {
        //                 parent.layer.msg("错误", {icon: 6});
        //                 table.reload('orderEqu-table');
        //             }
        //         }
        //     })

            // layer.open({
            //     content: '/ordEqu/upDamage/' + "id="+ data.id+'&state='+sta,
            //     title: "完成",
            //     area: ['40%', '85%'],
            //     type: 2,
            //     maxmin: true,
            //     shadeClose: true,
            //     end: function () {
            //         table.reload('orderEqu-table');
            //     }
            // });
        // };

    });
</script>
</body>
</html>